<!--
 * @FileDescription 首页
 * @Author lz
 * @Date 20230117 15:03:05
 * @LastEditors lz
 * @LastEditTime 20230117 15:03:05
-->
<template>
    <div class="wp">
        <div class="titBox">在线故障诊断数据共享平台</div>
        <div class="lodTxt">
            <div class="userNumber" style="margin-bottom: 20px;">    
              <div class="accountNumber">
                <img src="/public/images/登录界面/输入.png" style="height: 35px;width:35px;">
              </div>      
              <a-input  v-model:value="accountNumber" placeholder="手机号/邮箱/用户名" />
            </div>
            <div class="userNumber">
              <div class="passWord">
                <img src="/public/images/登录界面/密码.png" style="height: 35px;width:35px;">
              </div> 
              <a-input-password v-model:value="password" placeholder="请输入密码"/>
            </div>
            <div class="rememberPassword">
              <img src="/public/images/登录界面/对号.png" class="remPass" v-if="isRemPassword" @click="noRemPassword">
              <img src="/public/images/登录界面/矩形.png" class="noRemPass" v-else @click="toRemPassword">
              <span>记住密码</span>
            </div>
            <!-- ====================================================================================== -->
            <!-- <a-form
              :model="formState"
              name="basic"
              :label-col="{ span: 8 }"
              :wrapper-col="{ span: 16 }"
              autocomplete="off"
              @finish="onFinish"
              @finishFailed="onFinishFailed"
            >
              <a-form-item
                :rules="[{ required: true, message: 'Please input your username!' }]"
              >
                <div class="accountNumber">
                  <img class="accountNumberImg" src="/public/images/登录界面/输入.png">
                </div>    
                <a-input v-model:value="formState.username" placeholder="手机号/邮箱/用户名" />
              </a-form-item>
          
              <a-form-item class="passwordForm"
                :rules="[{ required: true, message: 'Please input your password!' }]"
              >
                <div class="passWord">
                  <img class="passWordImg" src="/public/images/登录界面/密码.png">
                </div> 
                <a-input-password v-model:value="formState.password" placeholder="请输入密码"  />
              </a-form-item>
          
              <a-form-item class="remrmberMe" name="remember" :wrapper-col="{ offset: 8, span: 16 }">
                <a-checkbox v-model:checked="formState.remember">记住密码</a-checkbox>
              </a-form-item>
              <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
                <a-button type="primary" html-type="submit">登录</a-button>
              </a-form-item>
            </a-form> -->
            <!-- ====================================================================================== -->
            <div class="logon"  @click="logon" >
                <p>登录</p>
            </div>
            <img src="/public/images/登录界面/矩形_上.png" class="top">
            <img src="/public/images/登录界面/矩形_右.png" class="right">
            <img src="/public/images/登录界面/矩形_下.png" class="down">
            <img src="/public/images/登录界面/矩形_左.png" class="left">
        </div>
    </div>
</template>

<script setup lang="ts">

import { onMounted, ref, reactive } from 'vue';
import { useRouter } from 'vue-router'
import { ElMessageBox } from 'element-plus'
const isRemPassword = ref(false)
const accountNumber = ref<string>('');
const password = ref<string>('');
const router = useRouter()
const state = reactive({
    current: 0,
});
function logon(){
    if(accountNumber.value == '') {
        ElMessageBox.alert("账号不能为空", "提示", {
          confirmButtonText: "确认",
          center: true,
        })
    } else if(password.value == '') {
        ElMessageBox.alert("密码不能为空", "提示", {
          confirmButtonText: "确认",
          center: true,
        })
    } 
    // else if('不存在此账号') {
    //     ElMessageBox.alert("账号输入错误", "提示", {
    //       confirmButtonText: "确认",
    //       center: true,
    //     })
    // } 
    // else if('密码错误') {
    //     ElMessageBox.alert("密码输入错误", "提示", {
    //       confirmButtonText: "确认",
    //       center: true,
    //     })
    // } 
    else {
        // 登录接口把账号密码传进去换取登录秘钥token
        // 存储 token 到浏览器
        // sessionStorage.setItem('token',token)
        // 配置前置守卫，在前置守卫中跳转其他API时判断
        router.push('OptionBox')
    }
}
function toRemPassword() {
    
    isRemPassword.value = true
}
function noRemPassword() {
    isRemPassword.value = false
}
onMounted(async function () {

});

</script>

<style scoped>
.wp {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 999;
    background-image: url('/public/images/登录界面/背景.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.titBox{
    font-size: 72px;
    font-weight: 600;
    color: rgba(51, 204, 204, 1);
    text-align: center;
    letter-spacing: 10px;
    margin-top: 150px;
}
.lodTxt {
    text-align: center;
    font-size: 24px;
    width: 547px;
    height: 349px;
    position: absolute;
    left: 50%;
    top: 40%;
    transform: translate(-50%, -50%);
    background-image: url('/public/images/登录界面/登录界面口.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin-top: 95px;
    padding-top: 79px;
}

/* @keyframes rotate3_1 {
    0% {
        transform: translate(-50%, -50%) scale(0);
    }

    100% {
        transform: translate(-50%, -50%) scale(1);
    }
} */
.userNumber {
    width: 347px;
    height: 52px;
    margin: 5px 0;
    display: flex;
    margin-left: 101px;
    border: 3px solid rgba(51, 204, 204, 1);
}

.logon {
    width: 158px;
    height: 47px;
    line-height: 47px;
    border-radius: 4px;
    font-size: 21px;
    font-weight: 600;
    position: absolute;
    left: 50%;
    bottom: 35px;
    transform: translate(-50%, 0);
    background-image: url('/public/images/登录界面/登录.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
:deep(.ant-input) {
    border: none; 
    background:none;
    font-size: 24px;
    color: white;
}
:deep(.ant-input-affix-wrapper) {
    border: none;
    background:none;
}
:deep(.ant-input-password-icon.anticon) {
    color: white;
}
.rememberPassword {
    text-align: end;
    display: inline-block;
    color: aqua;
    font-size: 18px;
    position: relative;
    right: -127px;
}
/* :deep(.ant-input-affix-wrapper > input.ant-input) {
    font-size: 14px !important;
} */
/* .logon>p {
    position: absolute;
    left: 50%;
    transform: translate(-50%);

}

.logon:hover {
    box-shadow: 0 0 10px 5px rgba(255, 255, 255, 0.3);
    color: rgb(48, 48, 48);
}

.logon:hover>.left-plane {
    left: -20px;
}

.logon:hover>.right-plane {
    right: -20px;
} */

/* .left-plane {
    position: absolute;
    left: -140px;
    top: 0;
    background: white;
    transform: skewX(-20deg);
    height: 50px;
    width: 130px;
    transition: 0.15s ease-out;
}

.right-plane {
    position: absolute;
    right: -140px;
    top: 0;
    background: white;
    transform: skewX(-20deg);
    height: 50px;
    width: 130px;
    transition: 0.15s ease-out;
} */
.accountNumber {
    /* height: 100%; */
    height: 48px;
    width:62px;
    background-color: rgba(51, 204, 204, 1);
}
.passWord {
    /* height: 100%; */
    height: 48px;
    width:62px;
    background-color: rgba(51, 204, 204, 1);
}
.remPass {
    width:24px;
    margin-top: -5px;
    margin-right: 2px
}
.noRemPass {
    width:20px; 
    margin-top: -5px;
    margin-right: 6px;
}
.top {
    position:absolute; 
    top:0; 
    left:200px;
    width:148px;
}
.right {
    position:absolute; 
    top:131px; 
    right:0;
    width:11px;
}
.down {
    position:absolute;
    bottom:0; 
    left:200px;
    width:148px;
}
.left {
    position:absolute; 
    top:131px; 
    left:0;
    width:11px;
}
.ant-form-item {
    width: 347px;
    height: 52px;
    border: 3px solid #33ccc3;
    margin-left: 101px;
    border-radius: 3px;
}
:deep(.ant-col) {
    max-width: 100% !important;
}
.accountNumberImg {
    height: 27px;
    width:26px;
    margin-top: 10px;
}
.passWordImg {
    height: 27px;
    width:23px;
    margin-top: 10px;
}
:deep(.ant-form-item-control-input-content) {
    display: flex;
}
.remrmberMe {
    border: none;
    margin-left: 0px;
    float:right;
    width:295px;
    height: 15px;
}
:deep(.ant-checkbox-wrapper) {
    color: #33ccc3;
    font-size: 18px;
}
.passwordForm {
    margin-bottom: 5px;
}
:deep(.ant-checkbox-inner) {
    background-color: transparent;
    border: 1px solid #33ccc3;
}
:deep(.ant-checkbox-wrapper:hover .ant-checkbox-inner, .ant-checkbox:hover .ant-checkbox-inner, .ant-checkbox-input:focus + .ant-checkbox-inner) {
    border-color: #33ccc3;
}
:deep(.ant-checkbox .ant-checkbox-checked:hover) {
    border-color: #33ccc3;
}

</style>